ComponentOne UWP Edition
Basic Library Overview / ListBox for UWP / C1ListBox Quick Start / Step 2 of 3: Adding Data to the ListBox
In This Topic
Step 2 of 3: Adding Data to the ListBox
In This Topic

In the last step, you added the C1ListBox control to the application. In this step, you will add code to display images from a photo stream.

Complete the following steps to add data to the control programmatically:

  1. Select the Page, navigate to the Properties window, click the lightning bolt Events button to view events, and scroll down and double-click the area next to the Loaded event.

    This will open the Code Editor and add the Page_Loaded event.

  2. Add the following imports statements to the top of the page:
    Visual Basic
    Copy Code 
    Imports C1.Xaml
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Net
Imports System.Xml.Linq
Imports Windows.UI.Popups
Imports Windows.UI.Xaml
Imports Windows.UI.Xaml.Controls
    C#
    Copy Code 
    using C1.Xaml;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Xml.Linq;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
  3. Add the following code inside the Page_Loaded event handler:
    Visual Basic
    Copy Code 
    LoadPhotos()
    C#
    Copy Code 
    LoadPhotos();
  4. Add the following code below the Page_Loaded event within the MainPage class:
    Visual Basic
    Copy Code 
    Private Async Function LoadPhotos() As Task
        Dim flickrUrl = "http://api.flickr.com/services/feeds/photos_public.gne"
        Dim AtomNS = "http://www.w3.org/2005/Atom"

        Dim photos = New List(Of Photo)()
        Dim client = WebRequest.CreateHttp(New Uri(flickrUrl))
        Dim response = Await client.GetResponseAsync()

        Try
            '#Region "** parse data"
            Dim doc = XDocument.Load(response.GetResponseStream())
            For Each entry As XElement In doc.Descendants(XName.[Get]("entry", AtomNS))
                Dim title = entry.Element(XName.[Get]("title", AtomNS)).Value

                Dim enclosure = entry.Elements(XName.[Get]("link", AtomNS)).Where(Function(elem) elem.Attribute("rel").Value = "enclosure").FirstOrDefault()
                Dim contentUri = enclosure.Attribute("href").Value
                photos.Add(New Photo() With { _
                    .Title = title, _
                    .Content = contentUri, _
                    .Thumbnail = contentUri.Replace("_b", "_m") _
                })
            Next
            '#End Region

            listBox.ItemsSource = photos
            loading.Visibility = Visibility.Collapsed
            listBox.Zoom = C1ZoomUnit.Fill
            listBox.Visibility = Visibility.Visible
        Catch
            Dim dialog = New MessageDialog("There was an error when attempting to download data from Flickr.")
            async dialog.ShowAsync()
        End Try
    End Function
    C#
    Copy Code 
    private async void LoadPhotos()
        {
            var flickrUrl = "http://api.flickr.com/services/feeds/photos_public.gne";
            var AtomNS = "http://www.w3.org/2005/Atom";

            var photos = new List<Photo>();
            var client = WebRequest.CreateHttp(new Uri(flickrUrl));
            var response = await client.GetResponseAsync();

            try
            {
                #region ** parse data
                var doc = XDocument.Load(response.GetResponseStream());
                foreach (var entry in doc.Descendants(XName.Get("entry", AtomNS)))
                {
                    var title = entry.Element(XName.Get("title", AtomNS)).Value;
                  
                    var enclosure = entry.Elements(XName.Get("link", AtomNS)).Where(elem => elem.Attribute("rel").Value == "enclosure").FirstOrDefault();
                    var contentUri = enclosure.Attribute("href").Value;
                    photos.Add(new Photo() { Title = title, Content = contentUri, Thumbnail = contentUri.Replace("_b","_m") });
                }
                #endregion

                listBox.ItemsSource = photos;
                loading.Visibility = Visibility.Collapsed;
                listBox.Zoom = C1ZoomUnit.Fill;
                listBox.Visibility = Visibility.Visible;
            }
            catch
            {
                var dialog = new MessageDialog("There was an error when attempting to download data from Flickr.");
                async dialog.ShowAsync();
            }
        }
  5. The code above pulls images from Flickr's public photo stream and binds the C1ListBox to the list of images.
  6. Add the following code just below the MainPage class:
    Visual Basic
    Copy Code 
    Public Class Photo
        Public Property Title() As String
            Get
                Return m_Title
            End Get
            Set(value As String)
                m_Title = Value
            End Set
        End Property
        Private m_Title As String
        Public Property Thumbnail() As String
            Get
                Return m_Thumbnail
            End Get
            Set(value As String)
                m_Thumbnail = Value
            End Set
        End Property
        Private m_Thumbnail As String
        Public Property Content() As String
            Get
                Return m_Content
            End Get
            Set(value As String)
                m_Content = Value
            End Set
        End Property
        Private m_Content As String
    End Class
    C#
    Copy Code 
    public class Photo
    {
        public string Title { get; set; }
        public string Thumbnail { get; set; }
        public string Content { get; set; }
    }

What You've Accomplished

You have successfully added data to C1TileListBox. In the next step, Step 3 of 3: Running the ListBox Application, you'll examine the ListBox for UWP features.

See Also
Step 3 of 3: Running the ListBox Application